<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
import resize from "@/views/diagnosisCenter/components/resize";

export default {
  mixins: [resize],
  props: {
    chartName: {
      type: String,
      default: "",
    },
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "stackedLine",
    },
    width: {
      type: String,
      default: "200px",
    },
    height: {
      type: String,
      default: "200px",
    },
    data: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      chart: null,
      symbolSize: 5,
      colorArray: [
        "#c04040",
        "#c0ff20",
        "#00ff80",
        "#33CCFF",
        "#6633CC",
        "#9966CC",
        "#CC9000",
        "#FFCCCC",
        "#a06000",
        "#ff40ff",
        "#c0ffff",
        "#a04000",
        "#FF33FF",
      ],
    };
  },
  watch: {
    data: {
      handler(newVal) {
        this.updateChart();
      },
      deep: true,
    },
  },
  mounted() {
    this.initChart();
    this.updateChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    updateChart() {
      this.$nextTick(() => {
        this.setBaseOption();
        this.chart.setOption({
          // legend: {
          //   data: this.data.map((item) => {
          //     return item.name;
          //   }),
          // },
          xAxis: Array.from({ length: 1 }, () => {
            return {
              data: Array.from(
                { length: this.data[0].value.length },
                (_, i) => i
              ),
            };
          }),
          series: this.data.map((item, index) => {
            let yDifferentValue = 1;
            if (item.isAlong === true) {
              return {
                id: index,
                name: item.name,
                type: "line",
                smooth: false,
                symbol: "circle",
                emphasis: {
                  focus: "self",
                  blurScope: "coordinateSystem",
                },
                yAxisIndex: item.value[0] > yDifferentValue ? 0 : 1,
                symbolSize: this.symbolSize,
                showSymbol: false,
                itemStyle: {
                  color: this.colorArray[index],
                },
                lineStyle: {
                  width: 1.5,
                  type: item.value[0] > yDifferentValue ? "solid" : "dotted",
                },
                data: item.value,
              };
            } else {
              return {
                id: index,
                name: item.name,
                type: "custom",
                xAxisIndex:1,
                yAxisIndex: 2,
                itemStyle: {
                  opacity: 0.8,
                },
                encode: {
                  // x: [0], // data 中『维度1』和『维度2』对应到 X 轴
                  y: 1, // data 中『维度0』对应到 Y 轴
                },
                renderItem: function (params, api) {
                  //开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的
                  var status = api.value(0); //这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
                  var val = api.value(1); //这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
                  var start = api.coord([
                    params.dataIndex,
                    params.seriesIndex % 2,
                  ]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
                  var end = api.coord([
                    params.dataIndex + 1,
                    params.seriesIndex % 2,
                  ]);
                  var height = 24; //柱体宽度
                  return {
                    type: "rect", // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
                    shape: echarts.graphic.clipRectByRect(
                      {
                        // 矩形的位置和大小。
                        x: start[0],
                        y: start[1] - height / 2,
                        width: end[0] - start[0],
                        height: height,
                      },
                      {
                        // 当前坐标系的包围盒。
                        x: params.coordSys.x,
                        y: params.coordSys.y,
                        width: params.coordSys.width,
                        height: params.coordSys.height,
                      }
                    ),
                    style: {
                      stroke: val < 0.5 ? "red" : "green",
                      fill: val < 0.5 ? "red" : "green",
                    },
                  };
                },
                data: item.value,
              };
            }
          }),
        });
      });

    },
    initChart() {
      this.$nextTick(() => {
        this.chart = echarts.init(document.getElementById(this.id));
        this.setBaseOption();
      });

    },
    setBaseOption() {
      this.chart.setOption(
        {
          backgroundColor: "#394056",
          // title: {
          //   top: 20,
          //   text: this.chartName,
          //   textStyle: {
          //     fontWeight: "normal",
          //     fontSize: 16,
          //     color: "#F1F1F3",
          //   },
          //   left: "1%",
          // },
          dataZoom: [
            {
              type: "inside", // 类型为内部缩放
            },
          ],
          tooltip: {
            trigger: "None",
          },
          legend: {
            type: "scroll",
            top: 20,
            icon: "rect",
            itemWidth: 14,
            itemHeight: 5,
            itemGap: 13,
            data: this.data.map((item) => {
              return item.name;
            }),
            right: "4%",
            textStyle: {
              fontSize: 12,
              color: "#F1F1F3",
            },
          },
          //三个坐标系
          grid: [
            {
              top: 100,
              left: "2%",
              right: "2%",
              bottom: "20%",
              containLabel: true,
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  lineStyle: {
                    color: "#57617B",
                  },
                },
              },
            },
            {
              top:'80%',
              left: "2%",
              right: 62,
              bottom: "5%",
              containLabel: true,
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  lineStyle: {
                    color: "#57617B",
                  },
                },
              },
            },
          ],
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              axisLine: {
                lineStyle: {
                  color: "#57617B",
                },
              },
            },
            {
              type: "category",
              gridIndex:1,
              boundaryGap: false,
              axisLine: {
                lineStyle: {
                  color: "#57617B",
                },
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              scale: true,
              name: "V(A)",
              // gridIndex: 0,
              axisTick: {
                show: false,
              },
              axisLine: {
                lineStyle: {
                  color: "#57617B",
                },
              },
              axisLabel: {
                margin: 10,
                textStyle: {
                  fontSize: 14,
                },
              },
              splitLine: {
                lineStyle: {
                  color: "#57617B",
                },
              },
            },
            {
              type: "value",
              scale: true,
              name: "V(A)",
              axisTick: {
                show: false,
              },
              axisLine: {
                lineStyle: {
                  color: "#57617B",
                },
              },
              axisLabel: {
                margin: 10,
                textStyle: {
                  fontSize: 14,
                },
              },
              splitLine: {
                lineStyle: {
                  color: "#57617B",
                },
              },
            },
            {
              gridIndex:1,
              offset: 0,
              type: "category",
              position: "left",
              axisLabel: { show: true, color: "#57617B" },
              data: ["轨道", "小轨"],
              axisLine: { show: false, onZero: true },
              axisTick: { show: false },
              splitLine: { show: false },
            },

          ],
        },
        true
      );
    },
  },
};
</script>
<!--ReferenceError: initEcharts is not defined-->